<template>
  <div class="record-wrapper">
    <Modal
      :title="title"
      width="850"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel"
    >
      <div class="search-con">
        <DatePicker
          type="daterange"
          v-model="selectDate"
          format="yyyy-MM-dd"
          placeholder="请选择日期"
          style="width: 200px;margin-right: 10px;"
          @on-change="handleDatePicker"
        ></DatePicker>
        <Select placeholder="请选择渠道" v-model="type" style="width: 200px;" @on-change="handleSelect">
          <Option :value="0">全部</Option>
          <Option :value="1">充值</Option>
          <Option :value="2">提现</Option>
        </Select>
      </div>
      <Table
        style="margin-bottom: 15px;"
        border
        :columns="columns"
        :data="result.list"
        :loading="loading"
      >
      </Table>
      <Page
        :total="result.size"
        :current.sync="page"
        :page-size-opts="[10, 20, 40, 80, 100]"
        show-total
        show-elevator
        show-sizer
        @on-change="handleCurrentChange"
        @on-page-size-change="handleSizeChange"
      ></Page>
    </Modal>
  </div>
</template>

<script>
  import qs from 'qs';
  import { dateFormat } from '@/static/tools'; 
  export default {
    name: 'recordModal',
    props: {
      title: String,
      id: {
        type: Number,
        default: -1
      },
      value: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        selectDate: [],
        beginDate: '',
        endDate: '',
        type: 0,
        page: 1,
        pageSize: 10,
        columns: [
          { title: '客户名称', key: 'investorName', align: 'center' },
          { 
            title: '时间',
            key: 'ctime',
            align: 'center',
            render: (h, params) => {
              return h('span', dateFormat(params.row.ctime, 'year'));
            }
          },
          { 
            title: '金额（元）',
            key: 'chargeAmount',
            align: 'center',
            render: (h, params) => {
              const { chargeAmount } = params.row;
              let amount = (parseFloat(chargeAmount) / 100).toFixed(2);
              return h('span', amount);
            }
          },
          { 
            title: '类型',
            key: 'type',
            align: 'center',
            render: (h, params) => {
              const { type } = params.row;
              return h('span', type === 1 ? '充值' : type === 2 ? '提现' : '还款自动划转' );
            }
          },
          { 
            title: '还款方式',
            key: 'rechargeWay',
            align: 'center',
            render: (h, params) => {
              const { rechargeWay } = params.row;
              return h('span', this.repayWayFormatter(rechargeWay));
            }
          },
          { title: '备注', key: 'remark', align: 'center' }
        ],
        result: {},
        loading: true
      }
    },
    watch: {
      value (newVal) {
        if (newVal) {
          this.getRechargeList();
        }
      }
    },
    methods: {
      // 获取直投客户充值记录列表
      getRechargeList () {
        this.loading = true;
        this.$http.post('/helsinki/admin/investor/rechargeList', qs.stringify({
          investorId: this.id,
          type: this.type,
          beginDate: this.beginDate,
          endDate: this.endDate,
          page: this.page,
          pageSize: this.pageSize
        }))
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.result = data;
          } else {
            this.$Message.info(info);
          }
          this.loading = false;
        }, err => {
          this.loading = false;
        });
      },
      // 弹窗取消
      handleCancel () {
        this.selectDate = [];
        this.beginDate = '';
        this.endDate = '';
        this.type = 0;
        this.$emit('input', false);
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.page = val;
        this.getRechargeList();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.pageSize = val;
        this.getRechargeList();
      },
      handleDatePicker (val) {
        if (Array.isArray(val)) {
          this.beginDate = val[0];
          this.endDate = val[1];
          this.selectDate = val;
        } else {
          this.beginDate = '';
          this.endDate = '';
          this.selectDate = [];
        }
        this.page = 1;
        this.getRechargeList();
      },
      handleSelect (value) {
        this.page = 1;
        this.getRechargeList();
      },
      repayWayFormatter (value) {
        let result;
        switch (value) {
          case 0:
            result = '银行卡';
            break;
          case 1:
            result = '支付宝';
            break;
          case 2:
            result = '微信';
            break;
          default:
            result = '';
            break;
        }
        return result;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-con {
    margin-bottom: 15px;
  }

  .ivu-page {
    margin-top: 12px;
    text-align: right;
  }
</style>
